<template>
 <div class="customerlist_container">
   <div class="nav" v-if="!searchFlag">
     <Breadcrumb separator=">">
       <BreadcrumbItem to="">客户列表</BreadcrumbItem>
       <BreadcrumbItem to="">{{targetName}}</BreadcrumbItem>
     </Breadcrumb>
   </div>
   <Card class="customerlist" v-if="searchFlag">
       <Form :label-width="90" label-position="left" :inline=true >
            <Row>
              <!--<Col span="5">
                <Form-item label="天猫昵称" prop="taobaoNick" :label-width="60">
                    <Input v-model="formValidate.taobaoNick" placeholder="请输入天猫昵称" clearable style="width:10vw;"></Input>
                </Form-item>
              </Col>-->
              <Col span="5">
                <Form-item label="收件人手机号" prop="receiverMobile" :label-width="90">
                    <Input v-model="formValidate.receiverMobile" placeholder="请输入收件人手机号" clearable style="width:10vw;"></Input>
                </Form-item>
              </Col>
              <Col span="5" push="1">
                <Form-item label="会员手机号" prop="mobile" :label-width="90">
                    <Input v-model="formValidate.mobile" placeholder="请输入会员手机号" clearable style="width:10vw;"></Input>
                </Form-item>
              </Col>
              <Col span="5" push="2">
                <Form-item label="微信昵称" prop="wxNick" :label-width="90">
                    <Input v-model="formValidate.wxNick" placeholder="请输入微信昵称" clearable style="width:10vw;"></Input>
                </Form-item>
              </Col>
              <Col span="5" push="3">
                <Form-item label="openid" prop="openId" :label-width="90">
                  <Input v-model="formValidate.openId" placeholder="请输入openId" clearable style="width:14vw;"></Input>
                </Form-item>
              </Col>
            </Row>

            <Row style="margin-top:2vh;">
              <Col span="5">
                <Form-item label="会员类型" prop="memberType" :label-width="90">
                    <Select v-model="formValidate.memberType" placeholder="请选择..."  clearable style="width:10vw;" >
                        <!--<Option v-for="(item,index) in formValidate.memberType" :key="index" :value="item.value">{{item.label}}</Option>-->
                      <Option value="1">会员</Option>
                      <Option value="2">非会员-微信粉丝</Option>
                      <Option value="3">非会员-顾客</Option>
                    </Select>
                </Form-item>
              </Col>
              <Col span="5"  push="1">
                <Form-item label="入会渠道" prop="registerChannelId">
                  <Select v-model="formValidate.registerChannelId" placeholder="请选择..." style="width:10vw;"  clearable>
                    <Option v-for="(item,index) in channelList" :key="index" :value="item.id">{{item.name}}</Option>
                  </Select>
                </Form-item>
              </Col>
              <Col span="5" push="2">
                <Form-item label="会员等级" prop="levelId" :label-width="90">
                    <Select v-model="formValidate.levelId" placeholder="请选择..."  clearable style="width:10vw;"  @on-open-change="$store.dispatch('fetchlevelRuleList')">
                        <Option v-for="(item,index) in levelRulelist" :key="index" :value="item.levelId">{{item.levelName}}</Option>
                    </Select>
                </Form-item>
              </Col>
              <Col span="8" push="3">
                <Form-item label="最后付款时间">
                    <Row>
                        <Col span="10">
                            <Date-picker type="datetime" placeholder="请输入开始时间" v-model="formValidate.lastPaymentDateFrom" style="width:6vw;" format="yyyy-MM-dd HH:mm:ss"  @on-change="formValidate.lastPaymentDateFrom=$event"></Date-picker>
                        </Col>
                        <Col span="2" style="text-align: center" push="2">~</Col>
                        <Col span="10" push="2">
                            <Date-picker type="datetime" placeholder="请输入结束时间" v-model="formValidate.lastPaymentDateTo" style="width:6vw;" format="yyyy-MM-dd HH:mm:ss"  @on-change="formValidate.lastPaymentDateTo=$event"></Date-picker>
                        </Col>
                    </Row>
                </Form-item>
              </Col>
            </Row>
            
            <Row style="margin-top:2vh;">
              
              <Col span="8">
                <Form-item label="入会时间" :label-width="90">
                  <Row>
                      <Col span="11">
                          <Date-picker type="datetime" placeholder="请输入开始时间" v-model="formValidate.registerDateFrom" style="width:10vw;" format="yyyy-MM-dd HH:mm:ss"  @on-change="formValidate.registerDateFrom=$event"></Date-picker>
                      </Col>
                      <Col span="2" push="2" style="text-align: center">~</Col>
                      <Col span="11" push="3">
                          <Date-picker type="datetime" placeholder="请输入结束时间" v-model="formValidate.registerDateTo" style="width:10vw;" format="yyyy-MM-dd HH:mm:ss"  @on-change="formValidate.registerDateTo=$event"></Date-picker>
                      </Col>
                  </Row>
                </Form-item>
              </Col>
              <Col span="8" push="11">
                <Form-item>
                  <Button type="info" style="margin-left: 8px" @click="FetchTableList" :disabled="queryDisabled">查询</Button>
                  <Button type="primary" @click="Skip">新建客户</Button>
                </Form-item>
              </Col>
            </Row>
        </Form>
    </Card>
    <Card class="fetch_table">
      <Table :loading="TableLoading" border :columns="columns5" :data="tabledata"></Table>
      <Row type="flex" justify="center" align="middle" style="margin-top:2vh;">
        <Col>
            <Page :id="pageId" show-total :total="total" :page-size="pageSize" @on-change="pageable" @on-page-size-change="changegroupPageSize" show-sizer show-elevator></Page>
        </Col>
        <Col push="1">
          <Button style="margin-top: 2vh;" type="primary" @click="goElevatorPage(pageId)">跳转</Button>
        </Col>
      </Row>
    </Card>
 </div>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
// 调用接口方法需先导入接口文件的方法
import { fetchTableList, targetDataList, fetchChannelList} from '@/api/customer';
import filter  from '@/util/date';
export default {
  name:'CustomerList',
  data () {
    const validateNumber = (rule, value, callback) => {
        if (value % 1 != 0) {
          callback(new Error("请输入整数"));
        } else {
          callback();
        }
    };
      return {
        channelList: [],
        targetId: this.$route.params.targetId,
        targetName: '',
        searchFlag: true,
        pageId:"targetPage",
        queryDisabled: false,
        TableLoading:false,
        modal1:false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        current:1,
        memberId:'',
        tabledata:[],
        formValidate: {
          taobaoNick: "",
          receiverMobile: "",
          mobile: "",
          wxNick: "",
          openId: "",
          levelId: "",
          lastPaymentDateFrom: "",
          lastPaymentDateTo:"",
          registerChannelId:"",
          lastFollowDateFrom:"",
          lastFollowDateTo:"",
          registerDateFrom:'',
          registerDateTo:"",
          memberType: '',
      },
      ruleValidate: {
        id: [{  message: "昵称不能为空", trigger: "blur" }],
        receiverMobile: [
          { message: "收件人手机号不能为空", trigger: "blur" },
          { trigger: "blur",validator: validateNumber }
        ],
        mobile: [
          {  message: "会员手机号不能为空", trigger: "blur" },
          { trigger: "blur",validator: validateNumber }
        ],
        wxNick: [
          {  message: "微信昵称不能为空", trigger: "blur" },
        ],
        openId: [
          {  message: "openId不能为空", trigger: "blur" },
          {   trigger: "blur" ,validator: validateNumber }
        ],
        levelId: [
          {  message: "请选择会员等级", trigger: "blur" },
        ],
        lastPaymentDateFrom: [
          {  message: "请选择开始时间", trigger: "change" },
        ],
        lastPaymentDateTo: [
          {  message: "请输入结束时间", trigger: "change" }
        ],
        registerChannelId: [
          {  type: "number", message: "请选择入会渠道", trigger: "change" }
        ],
        lastFollowDateFrom: [
          { message: "请选择入会开始时间", trigger: "change" }
        ],
        lastFollowDateTo: [
          { message: "请选择入会结束时间", trigger: "change" }
        ],
        Officialdate: [
          { message: "请选择公众号开始关注时间", trigger: "change" }
        ],
        registerDateTo: [
          { message: "请选择公众号结束关注时间", trigger: "change" }
        ]
      },
      // 表格
      columns5: [
            /*{
              title: '天猫昵称',
              key: 'taobaoNick',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let text = "-";
                if (params.row.taobaoNick != null && params.row.taobaoNick != '') {
                  text = params.row.taobaoNick;
                }
                return h(
                  "span", {}, text
                );
              }
            },*/
            {
              title: '微信昵称',
              key: 'wxNick',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let text = "-";
                if (params.row.wxNick != null && params.row.wxNick != '') {
                  text = params.row.wxNick;
                }
                return h(
                  "span", {}, text
                );
              }
            },
            {
                title: '会员类型',
                key: 'memeberType',
                align:'center',
                minWidth:150,
                render: (h, params) => {
                    let text = "-";
                    if (params.row.memeberType == 1) {
                    text = "会员";
                    } else if (params.row.memeberType == 2) {
                    text = "非会员-微信粉丝";
                    } else if (params.row.memeberType == 3) {
                    text = "非会员-顾客";
                    } else if (params.row.memeberType == 4) {
                    text = "非会员-潜客";
                    }
                    return h(
                      "span",{},text
                    );
                }
            },
            {
              title: '会员等级',
              key: 'levelName',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let text = "-";
                if (params.row.levelName != null && params.row.levelName != '') {
                  text = params.row.levelName;
                }
                return h(
                  "span", {}, text
                );
              }
            },
            {
              title: '线下消费次数',
              key: 'belowInLineTradeNum',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let text = "0";
                if (params.row.belowInLineTradeNum != null && params.row.belowInLineTradeNum != '' && params.row.belowInLineTradeNum > 0) {
                  text = params.row.belowInLineTradeNum;
                }
                return h(
                  "span", {}, text
                );
              }
            },
            {
              title: '是否粉丝',
              key: 'isFollow',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let _this = this;
                let text = "-";
                if (params.row.isFollow == 0) {
                  text = "否";
                } else if (params.row.isFollow == 1) {
                  text = "是";
                }
                const row = params.row;
                return h(
                  "span",{

                  },
                  text
                );
              }
            },
            {
              title: '线上消费次数',
              key: 'onLineTradeNum',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let text = "0";
                if (params.row.onLineTradeNum != null && params.row.onLineTradeNum != '' && params.row.onLineTradeNum > 0) {
                  text = params.row.onLineTradeNum;
                }
                return h(
                  "span", {}, text
                );
              }
            },
            {
              title: '可用积分',
              key: 'availablePoints',
              align:'center',
              minWidth:150,
              render: (h, params) => {
                let text = "0";
                if (params.row.availablePoints != null && params.row.availablePoints != '' && params.row.availablePoints > 0) {
                  text = params.row.availablePoints;
                }
                return h(
                  "span", {}, text
                );
              }
            },
            {
              title: '入会时间',
              key: 'registerTime',
              sortable: true,
              minWidth:180,
              align:'center',
              // ellipsis:true,
              render: (h, params) => {
                let text = "-";
                if (params.row.registerTime != null && params.row.registerTime != '') {
                  text = params.row.registerTime;
                }
                return h(
                  "span", {}, text
                );
              }
            },
            {
                title: '操作',
                key: 'action',
                width: 400,
                align: 'center',
                render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                              type: 'primary',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                this.gobasicattr(params.row.memberId,1)
                              }
                          }
                      }, '基础属性'),
                      /*h('Button', {
                          props: {
                              type: 'error',
                              size: 'small',
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                this.gobusiness(params.row.memberId,2)
                              }
                          }
                      }, '交易明细'),*/
                      h('Button', {
                          props: {
                              type: 'warning',
                              size: 'small',
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                this.gosocial(params.row.memberId,3)
                              }
                          }
                      }, '社交账号'),
                      h('Button', {
                          props: {
                              type: 'error',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                this.gointegral(params.row.memberId,4)
                              }
                          }
                      }, '积分流水'),
                      h('Button', {
                          props: {
                              type: 'success',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                 this.goCommunication(params.row.memberId,5)
                              }
                          }
                      }, '沟通记录'),
                      h('Button', {
                          props: {
                              type: 'info',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                this.goEditCustomer(params.row.memberId,6)
                              }
                          }
                      }, '编辑')
                  ]);
              }
            }
        ],
      }
  },
  methods: {
    ...mapMutations(['FETCH_LEVEL_RUlE']),
    ...mapActions(['fetchlevelRuleList']),
    Goback(){
     this.$router.back();
    },
    Skip(){
      this.$router.push({path:'/static/AddCustomer', query:{"_button": true}})
    },
    gobasicattr(params){
      this.$router.push({path:"/static/customerview/" + 'id='+ params + '/' + 'buttonid=' + '1',query:{"_button": true}})
    },
    gobusiness(params){
      this.$router.push({path:"/static/customerview/" + 'id='+ params + '/' + 'buttonid=' + '2',query:{"_button": true}})
    },
    gosocial(params){
      this.$router.push({path:"/static/customerview/"  + 'id='+ params + '/' + 'buttonid=' + '3',query:{"_button": true}})
    },

    gointegral(params){
      this.$router.push({path:"/static/customerview/"  + 'id='+ params + '/' + 'buttonid=' + '4',query:{"_button": true}})
    },
    goCommunication(params){
      this.$router.push({path:"/static/customerview/"  + 'id='+ params + '/' + 'buttonid=' + '5',query:{"_button": true}})
    },
    goEditCustomer(params){
      this.$router.push({path:"/customer/editCustomer/"+ params})
    },
    // 切换分页
    pageable(current) {
        this.pageNum = current;
        this.FetchTableList();
    },
    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },

    // 查询
    FetchTableList() {
      if (this.targetId && this.targetId > 0){
        this.searchFlag = false;
        this.targetData();
      }else {
        this.searchFlag = true;
        this.queryCustomerList();
      }
    },
    queryCustomerList(){
      this.queryDisabled = true;
      this.TableLoading = true
      var reqParams = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        taobaoNick : this.formValidate.taobaoNick,
        wxNick : this.formValidate.wxNick,
        receiverMobile:this.formValidate.receiverMobile,
        mobile:this.formValidate.mobile,
        openId:this.formValidate.openId,
        memberType:this.formValidate.memberType,
        levelId:this.formValidate.levelId,
        registerChannelId:this.formValidate.registerChannelId,
        lastPaymentDateFrom:this.formValidate.lastPaymentDateFrom,
        lastPaymentDateTo:this.formValidate.lastPaymentDateTo,
        lastFollowDateFrom:this.formValidate.lastFollowDateFrom,
        lastFollowDateTo:this.formValidate.lastFollowDateTo,
        registerDateFrom:this.formValidate.registerDateFrom,
        registerDateTo:this.formValidate.registerDateTo,
      };
      fetchTableList(reqParams).then(res=>{
        this.queryDisabled = false;
        this.TableLoading = false;
        if (res.data.code == 200) {
          this.tabledata =  res.data.result.records;
          this.memberId = res.data.result.records.memberId;
          this.pageSize = res.data.result.size;
          this.pageNum = res.data.result.pageNum;
          this.total = res.data.result.total;
        }
      }).catch(error=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },
    targetData(){
      this.queryDisabled = true;
      this.TableLoading = true
      var reqParams = {
        targetId: this.targetId,
        page: this.pageNum,
        limit: this.pageSize,
      }
      targetDataList(reqParams).then(res=>{
        this.queryDisabled = false;
        this.TableLoading = false;
        if (res.data.code == 200) {
          this.tabledata =  res.data.data.result.page.records;
          this.memberId = res.data.data.result.page.records.memberId;
          this.pageSize = res.data.data.result.page.size;
          this.pageNum = res.data.data.result.page.pageNum;
          this.total = res.data.data.result.page.total;
          this.targetName = res.data.data.result.targetName;
        }
      }).catch(error=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },
    changegroupPageSize(pageSize){ // 切换每页条数
      this.pageNum = 1,
      this.pageSize = pageSize;
      this.FetchTableList();
    },
     beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
        next();
    },
    loadData(){

    },
    fetchChannels(){
      fetchChannelList().then(res=>{
        if (res.data.code == 200) {
          this.channelList =  res.data.data;

        }
      }).catch(error=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    }
  },
  computed:{
    ...mapState(['levelRulelist']),
  },
  mounted () {
      this.fetchChannels();
      this.FetchTableList();
  }
}
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.customerlist_container{
  @include container_global;
  .customerlist{
    width: 100%;
    height: 100%;
    background-color: #fff;
    .member,
    .jointime,
    .date {
      margin-top: 20px;
      // @include display_global;
    }
  }
  .fetch_table{
    width: 100%;
    min-height: 30vh;
    margin-top: 10px;
    margin-bottom: 10vh;
  }
}

</style>
